<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=no">
    <title>日新网_我的订单</title>
    <link rel="stylesheet" href="__TMPL__Public/assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="__TMPL__Public/assets/css/reset.css">
    <link rel="stylesheet" href="__TMPL__Public/assets/css/style.css">
    <link rel="stylesheet" href="/public/js/layer/skin/layer.css">
    <script type="text/javascript" src="__TMPL__Public/assets/js/rem.js"></script>
    <style>
        .tab_nav li {
            width: 25%!important;
            text-align: center;
        }
        .hidden {
            display: none;
        }
        /*退票弹窗*/
        .refund_ticket {
            width: 6.2rem;
            height: .2rem;
            display: none;
            margin: 0 auto;
        }
        .refund_ticket .title {
            font-size: 12px;
            color: #707070;
            line-height: 22px;
            margin:.42rem 0 .12rem .3rem;
        }
        .refund_ticket .text {
            width: 5.6rem;
            height: 1.6rem;
            margin: 0 auto;

        }
        .refund_ticket .text textarea {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            padding: 5px;
            font-size: 14px;
            letter-spacing: 1px;
        }

        .refund_ticket .qrcode {
            margin-left: 1.9rem;
        }

        /*个人中心 我的订单活动也*/
        .order_item {
            width: 6.8rem;
            height: 1.6rem;
            background-color: #fff;
            margin: 0 auto;
            border: 1px solid #c5c5c5;
            margin-bottom: .14rem;
            padding-top: .16rem;
        }
        .order_item .picture {
            width: 2.2rem;
            height: 1.26rem;
            float: left;
            margin-left: .16rem;
        }
        .order_item .picture img {
            width: 2.2rem;
            height: 1.26rem;
        }
        .order_item .rightarea {
            margin-left: 2.5rem;
        }
        .order_item .rightarea .no_active {
            display: none;
        }
        .order_item .rightarea .cancel_active {
            color: #a9a9a9!important;
        }
        .order_item .rightarea {
            font-size: .16rem;
            line-height: .20rem;
        }
        .order_item .rightarea .address , .order_item .rightarea .money,  .order_item .rightarea .cancel {
            letter-spacing: 1px;
        }
        .order_item .rightarea h3 {
            font-size: .24rem;
            color: #333333;
            font-weight: bolder;
            line-height: .28rem;
        }
        .order_item .rightarea .timer{
            margin-top: .08rem;
        }
        .order_item .rightarea .address {
            margin-top: .04rem;
        }
        .order_item .rightarea .btm {
            margin-top: .26rem;
        }
        .order_item .btm .cancel, .order_item .btm .money, .order_item .btm .refund, .order_item .btm .exchange, .order_item .btm .normal{
            float: right;
            color: #5d8dfe;
            margin-right: .12rem;
        }
        .red {
            color: #ff7e0c;
        }
        body {
            background-color: #fff!important;
        }
    </style>
</head>
<body>
<!--nav-->
<tc_include file="Public:nav"/>
<!--我的问答页-->
<div class="tab_nav" id="tab_nav">
    <ul class="comWidth clearfix index_ul">
        <volist name="count_index" id="vo">
            <a href="{:U('Order/Order/activity_lists', ['status' => $vo['status'], 'type' => 1])}"><li>{$vo.btn}(<span>{$vo.count}</span>)</li></a>
        </volist>
    </ul>
</div>
<div id="tab_content">
    <div class="tab_content comWidth index_content">
        <volist name="lists" id="vo">
            <div class="order_item">
                <a href="{$vo.link_addr}">
                    <div class="picture">
                        <img src="{$vo.img}" alt="">
                    </div>
                </a>
                <div class="rightarea">
                    <a href="javascript:;"><h3>{$vo.act_name}</h3></a>
                    <p class="timer"><span>{$vo.start_time}</span> ~ <span>{$vo.end_time}</span></p>
                    <p class="address"><span>{$vo.city_name}</span></p>
                    <div class="btm">
                        <span class="state {$vo['act_status']['status'] != 3 ? "red" : ''}">{$vo.act_status.des}</span>

                        <if condition="$vo['sub_menu']['pay']['status'] == 1">
                            <a data-href="{:U('Activity/Activity/activity_buy_ticket', ['order_id' => $vo['id']])}"><span class="money">去支付</span></a>
                        </if>

                        <if condition="$vo['sub_menu']['cancel_order']['status'] == 1">
                            <a href="{:U('Order/Order/order_refund', ['id' => $vo['id']])}"><span class="cancel">取消订单</span></a>
                        </if>

                        <if condition="$vo['sub_menu']['refund_order']['status'] == 1">
                            <a data-href="{:U('Order/Order/order_refund', ['id' => $vo['id']])}"><span class="refund">退票退款</span></a>
                        </if>

                        <if condition="$vo['sub_menu']['exchange']['status'] == 1">
                            <a><span class="exchange" data-order-id="{$vo.id}">我要兑票</span></a>
                        </if>

                        <if condition="$vo['sub_menu']['refund_check']['status'] == 1">
                            <span class="normal">退款审核中</span>
                        </if>

                        <if condition="$vo['sub_menu']['has_exchange']['status'] == 1">
                            <span class="normal">已出票</span>
                        </if>

                        <if condition="$vo['sub_menu']['has_refund']['status'] == 1">
                            <span class="normal">已退款</span>
                        </if>

                        <if condition="$vo['sub_menu']['refund_fail']['status'] == 1">
                            <span class="normal">审核失败</span>
                        </if>

                    </div>
                </div>
            </div>
        </volist>
        <if condition="empty($lists)">
            <div style="width: 5rem;height: 3.8rem;position: absolute;top: 50%;left: 50%;margin-top: -1.9rem;margin-left: -2.5rem;">
                <img src="/public/images/img/replace.png" alt="" style="width: 100%;height: auto;">
            </div>
        </if>
    </div>
    <div style="height: .5rem;line-height: .5rem;background-color: #efdddd;" class="js-infinite-scroll-loading text-center">更多</div>
    <div id="nextpage"></div>
</div>
<!--退票弹窗 -->
<div class="refund_ticket" id="refund_ticket">
    <p class="title">请输入退票理由:</p>
    <div class="text">
        <textarea name="refund_reason" class="refund_reason" cols="30" rows="10"></textarea>
    </div>
</div>
<!--兑换二维码-->
<div class="refund_ticket" id="exchange_qrcode">
    <p class="title"></p>
    <div class="qrcode">
        <img data-src="{:U('Activity/Activity/get_exchange_qrcode')}" alt="">
        <p style="margin-left: -.4rem;">入场时请将二维码展示给工作人员 </p>
    </div>
</div>
<!--页脚-->
<tc_include file="Public:footer"/>
<script src="__PUBLIC__/js/layer/layer_1.js"></script>
<script type="text/javascript" src="__TMPL__Public/assets/js/jquery.1.12.4.js"></script>
<script src="__TMPL__Public/assets/js/bootstrap.min.js" ></script>
<script src="__TMPL__Public/assets/js/jquery.infiniteScroll.js"></script>
<script>
    $(document).ready(function () {
        if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
            /*window.location.href="你的手机版地址";*/
            var ua = navigator.userAgent.toLowerCase();
            var isWeixin = ua.indexOf('micromessenger') != -1;
            if (isWeixin) {
                var get_base_info = "{$get_base_info}";
                if (get_base_info) {
                    var redirect_url        = "{:base64_encode(U('Order/Order/activity_lists'))}";
                    window.location.href    = "{:U('Wx/WxLogin/get_wx_user_base_info')}" + "&redirect=" + redirect_url;
                }
            }
        }
    })
</script>
<script>
    $(function () {

        var index = "{$list_index}";

        // tab显示背景
        $('.index_ul li:eq(' + (index - 1) + ')').addClass('active');

        // 加载更多
        $('#nextpage').infiniteScroll({
            loading:'.js-infinite-scroll-loading',
            total_pages:{$total_page},
            success:function(content){
                var $items = $(content).find('.order_item');
                if ($items.length > 0) {
                    $('.index_content').append($items);
                }
            }
        });
    })
</script>
<script>
    $(function () {
        // 去支付
        $('body').delegate('.money', 'click', function () {
            var url         = $(this).parent('a').attr('data-href');
            var ua          = navigator.userAgent.toLowerCase();
            var isWeixin    = ua.indexOf('micromessenger') != -1;
            if (isWeixin) {
                window.location.href = url + "&pay_type=3";
            } else {
                $.get(url, {pay_type : 2}, function (re) {
                    if (re.status) {
                        window.location.href = re.pay_url;
                    } else {
                        layer.msg(re.info);
                    }
                })
            }
        });

        // 退票退款
        $('body').delegate('.refund', 'click', function () {
            var href = $(this).parent('a').attr('data-href');
            layer.open({
                type: 1,
                title: false,
                closeBtn: 0,
                area: ['6.2rem',"4rem"],
                btn: ['提交', '取消'],
                shade: .3,
                shadeClose: true,
                content: $('#refund_ticket'),
                yes: function (index_l) {
                    var refund_reason = $('.refund_reason').val();
                    if (!refund_reason) {
                        layer.close(index_l);
                        layer.msg('请输入退票理由');
                        return;
                    }
                    $.get(href, {refund_reason : refund_reason}, function (re) {
                        layer.msg(re.info);
                        if (re.status) {
                            setTimeout(function () {
                                window.location.reload();
                                layer.close(index_l);
                            }, 1500);
                        }
                    })
                }
            });
        });

        // 兑换票
        $('body').delegate('.exchange', 'click', function () {
            var order_id    = $(this).attr('data-order-id');
            var img         = $('#exchange_qrcode').find('img');
            var src         = img.attr('data-src') + "&order_id=" + order_id;
            img.attr('src', src);
            layer.open({
                type: 1,
                title: false,
                scrollbar: false,
                move: false,
                closeBtn: 0,
                area: ['6.2rem',"3.5rem"],
                shadeClose: true,
                content: $('#exchange_qrcode'),
            });
        });
    })
</script>
</body>
</html>